<template>
    <el-row>
        <el-row>
            <el-row>
                <el-col :span="20">
                    <el-breadcrumb style="margin: 10px;">
                        <el-breadcrumb-item>全部科室</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
                <el-col :span="2" style="margin-top: 10px;">
                    <el-button type="primary" @click="allAddKe"
                               size="mini" style="width: 80px;">添加</el-button>
                </el-col>
                <el-col :span="2" style="margin-top: 10px;">
                    <el-button type="primary" @click="allRemKe"
                               size="mini" style="width: 80px;">删除</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-tabs type="border-card" style="margin: 20px 10px;">
                    <el-tab-pane v-for="(item, index) in allTab" :key="index" :label="item.label"
                    >
                        <!-- commonDepartCheckbox -->
                        <el-checkbox-group v-model="allChecked">
                            <el-checkbox v-for="(it, index) in allTabNei" :label="it.label" :key="index"  @change="allCheckedChange(it)"></el-checkbox>
                        </el-checkbox-group>
                    </el-tab-pane>
                </el-tabs>
            </el-row>
        </el-row>
        <!-- // 添加科室 -->
        <el-dialog title="添加科室" :visible.sync="addDepartDialog" width="60%" center :show-close="false" class="dialogs">
            <el-row>
                <el-col :span="12">
                    <div class="text">第一科室</div>
                    <div class="over">
                        <ul>
                            <li v-for="(item, index) in commonOne" :key="index" @click="commonOnes(item,index)"
                                :class="{active: activeName4 === index}">{{item.label}}</li>
                        </ul>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="text">第二科室</div>
                    <div class="over">
                        <ul>
                            <el-checkbox-group v-model="commonCheckGroup">
                                <el-checkbox v-for="(item, index) in commonTwo" :label="item.label" :key="item.value" @change="commonTwos(item,index)"
                                             style="display: block;">{{item.label}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </ul>
                    </div>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addCommon" size="mini" style="width: 80px;">添加</el-button>
              <el-button type="primary" @click="addDepartDialog = false" size="mini" style="width: 80px;  margin-left: 20px;">取 消</el-button>
            </span>
        </el-dialog>
    </el-row>
</template>
<script>
export default {
  data() {
    return {
      addDepartDialog: false,
      commonOne: [], // 科室一
      commonTwo: [], // 科室二
      commonCheckGroup: [], // 多选框
      activeName4: '',
      allTab: [], // 菜单栏
      allTabNei: [], // 菜单栏内容
      allChecked: [], // 菜单栏内容的选中值
      a: [
        {id: 1, label: '北京'},
        {id: 2, label: '南京'},
        {id: 3, label: '上海'}
      ],
      b: [{id: 1, label: '北京1'}, {id: 2, label: '南京2'}, {id: 3, label: '上海3'}],
      oneClick: [], // 一级科室点击
      twoClick: [], //
      abc: [
        {twoDep: [{id: 1, label: 1}, {id: 2, label: 2}, {id: 3, label: 3}]},
        {twoDep: [{id: 4, label: 4}, {id: 5, label: 5}, {id: 6, label: 6}]}
      ]
    }
  },
  created() {
    this.ab();
  },
  methods: {
    ab() {
      this.commonOne = this.a;
      this.commonTwo = this.b;
      this.commonTwo.forEach(item => {
        this.commonCheckGroup.push(item.label)
      })
      this.abc.forEach(item => {
        console.log(item.twoDep);
      })
    },
    // 弹框弹框
    allAddKe() {
      this.addDepartDialog = true;
    },
    // 一级科室onclick
    commonOnes(item, index) {
      this.activeName4 = index;
      console.log(item, index);
      this.oneClick.push(item.label); // 一级科室
      console.log(this.oneClick);
      this.commonTwo.forEach(item => {
        this.twoClick.push({two: [item]});
      })
    },
    // 二级科室onchange
    commonTwos(item, index) {

    },
    // 科室最终添加
    addCommon() {
      this.allTab.push(this.oneClick.slice(this.oneClick.length - 1)); // 一级科室
      this.allTabNei.push(this.twoClick.slice(this.twoClick.length - 1))
      console.log(this.twoClick);
      console.log(this.allTabNei)
      this.addDepartDialog = false;
    },
    // 一级科室onchange
    onchange(item, index) {
      console.log(item, index)
    },

    // 页面中的删除
    allRemKe() {

    },
    // 页面选中change
    allCheckedChange(item) {

    }

  }
}
</script>
<style>
    .active {
        background: #fd7522;
        border: 1px solid #fd7522;
        color: #fff;
    }
    .dialogs{
        height: 600px;
    }
    .text{
        text-align: center;
        margin: 10px 0;
    }
    ul, li{
        list-style: none;
    }
    .over{
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #2c3e50;
        width: 90%;
        height: 200px;
    }
    .over .el-checkbox.el-checkbox {
        margin-left: 20px;
        margin-top: 10px;
    }
    .over ul{
        padding-left: 10px;
    }
    .el-dialog--center .el-dialog__body{
        padding: 0 25px 30px;
    }
</style>
